<template>
  <section class='f-goods-detail'>
    <header class="f-header">
      <img style="width:100%;" :src="formData.headImg" alt="">
      <div style="padding: 10px 5px 18px 18px">
        <section class="f-flex-end f-mb-20">
          <p class="f-mr-20" style="font-weight: bold;font-size: 20px;color: #FF4628;">{{formData.monthRent/100}} 元/月</p>
          <!-- <p style="font-size: 12px;color: #666666;text-decoration-line: line-through;padding-bottom:2px">原套餐 29元/月</p> -->
        </section>
        <p style="font-weight: bold;font-size: 16px;color: #000000;">
          {{formData.goodsName}}【{{formData.monthRent/100}}元包{{formData.monthFlow}}G】
        </p>
        <p class="f-mt-05" style="font-weight: 400;font-size: 12px;color: #666666;">{{formData.preferential}}</p>
      </div>
    </header>

    <div class="f-html f-mt-10" v-if="formData.goodsDetail" v-html="formData.goodsDetail"></div>

    <van-action-bar>
      <van-action-bar-icon icon="wap-home-o" text="首页" @click="handleBack()" />
      <van-action-bar-icon icon="share-o" text="分享" @click="off.share = true" />
      <van-action-bar-button type="danger" color="#488BFE" text="立即办理" @click="pageJump('/goods/order')" />
    </van-action-bar>

    <van-share-sheet v-model:show="off.share" title="分享到" :options="shareList" @select="handleShare" :overlay="false"
      :round="false" @cancel="off.overlay = false" />
  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import api from '../api'
import { successDeal, toThousands, bytesToSize, getStore } from '@/utils/utils';
import html2canvas from 'html2canvas'
import JsBridge from '@/utils/JsBridge.js'
import { showLoadingToast, closeToast } from 'vant';
import QrcodeVue from 'qrcode.vue'

export default {
  components: { QrcodeVue },

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      off: {
        overlay: false,
        share: false,
      },

      userInfo: {},
      goodsId: '',
      formData: {},

      shopForm: {},

      posterData: {},
      posterImgURL: null,
      shareList: [
        { name: '微信', icon: 'wechat' },
        { name: 'QQ', icon: 'qq' },
        { name: '复制链接', icon: 'link' },
      ],
    })

    onMounted(() => {
      state.userInfo = getStore('USER_INFO_MF')

      store.commit("setNavBar", {
        title: route.query.goodsName,
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
        bg: ''
      });

      state.goodsId = route.query.goodsId
      getGoodsDetail(state.goodsId)

      getShopInfo()
    })

    const getGoodsDetail = (goodsId) => {
      let json = {
        goodsId
      }
      api.goodsDetail(json).then(res => {
        state.formData = res.data
      })
    }

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.shopForm = res.data
      })
    }

    const pageJump = (path) => {
      router.push({
        path,
        query: {
          goodsId: state.goodsId
        }
      })
    }

    const handleBack = () => {
      router.go(-1)
    }

    const handleShare = (option) => {
      if (option.name == '复制链接') {
        handleCopy(state.formData)
      }
      state.off.share = false
      state.off.overlay = false
    }

    function handleCopy(value) {
      const input = document.createElement('input');
      document.body.appendChild(input)

      let url = getUrl(value)
      input.setAttribute('value', url);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        successDeal('复制成功！')
      }
      document.body.removeChild(input);
    }

    const getUrl = (value) => {
      let url = ``
      let shopName = encodeURI(state.shopForm.shopName)
      if (WEB_SOURCE.mode == "master") {
        url = `https://miaofanbao.yilianyun.top/manager/#/h5goods?m=${state.shopForm.shopId}&u=${state.userInfo.userId}&n=${shopName}&g=${value.goodsId}`
      } else {
        url = `http://192.168.10.31:5001/miaofan_web/#/h5goods?m=${state.shopForm.shopId}&u=${state.userInfo.userId}&n=${shopName}&g=${value.goodsId}`
      }
      return url
    }

    return {
      ...toRefs(state),
      toThousands,
      bytesToSize,
      pageJump,
      handleBack,
      handleShare,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-goods-detail {
  .f-header {
    background: #fff;
  }
}
</style>